<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friend"></i> 用户管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <div class="handle-box-left">
          <el-input v-model="queryInfo.CilentId" id="search-line" placeholder="请输入用户ID" class="handle-input mr10"></el-input>
          <el-button id="search-button" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
        <div class="handle-box-right">
          <el-button type="primary" icon="el-icon-lx-friendadd" round>增加用户（暂无）</el-button>
        </div>
      </div>

      <el-table :cell-style="adminstyle" :data="ClientList" @sort-change="SortChange" border class="table" ref="multipleTable" header-cell-class-name="table-header" stripe>
        //详情
        <el-table-column type="expand">
          <template #default="scope">
            <p>用户角色: {{ userRole(scope.row.userRoleId) }}</p>
            <p>注册时间: {{ scope.row.signUpDate }}</p>
            <p>是否自动选择充电桩: {{ scope.row.autoSelect }}</p>
            <p>充电桩故障时是否自动切换充电桩: {{ scope.row.autoFix }}</p>
          </template>
        </el-table-column>
        //用户ID
        <el-table-column prop="userId" label="ID" width="70%" sortable="custom" align="center">
          <template #default="scope">{{ scope.row.userId }}</template>
        </el-table-column>
        //用户名
        <el-table-column prop="userName" label="用户名" align="center">
          <template #default="scope">{{scope.row.userName}}</template>
        </el-table-column>
        //本月充电时长
        <el-table-column prop="mouthElectricity" label="本月用电" sortable="custom" align="center">
          <template #default="scope">{{scope.row.mouthElectricity}}</template>
        </el-table-column>
        //充电总时长
        <el-table-column prop="totalChargeHour" label="充电总时长（小时）" sortable="custom" align="center">
          <template #default="scope">{{scope.row.totalChargeHour}}</template>
        </el-table-column>
        //超时总时长
        <el-table-column prop="totalOverTimeHour" label="超时总时长（小时）" sortable="custom" align="center">
          <template #default="scope">{{scope.row.totalOverTimeHour}}</template>
        </el-table-column>
        //充电次数
        <el-table-column prop="totalChargeTimes" label="充电次数" sortable="custom" align="center">
          <template #default="scope">{{scope.row.totalChargeTimes}}</template>
        </el-table-column>
        //电话
        <el-table-column prop="phone" label="联系方式" align="center">
          <template #default="scope">{{scope.row.userPhone}}</template>
        </el-table-column>
        //昵称
        <el-table-column prop="userNickName" label="用户昵称" align="center">
          <template #default="scope">{{scope.row.userNickName}}</template>
        </el-table-column>
        //用户等级
<!--        <el-table-column prop="userRoleId" label="管理员" align="center">-->
<!--          <template #default="scope">{{scope.row.userRoleId}}</template>-->
<!--        </el-table-column>-->
        //详情按钮
        //设置管理员及聊天操作
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div class="flex flex-wrap items-center">
              <el-dropdown>
                <el-button type="primary">
                  操作<el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleEdit(scope.$index, scope.row)">设为管理员</el-dropdown-item>
                    <el-dropdown-item @click="handleActive(scope.$index, scope.row)">修改信息</el-dropdown-item>
                    <el-dropdown-item @click="handleActive(scope.$index, scope.row)">与用户对话</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>

      </el-table>

    </div>

    <div class="pagination">
      <el-pagination background layout="total,prev,pager,next" :current-page="pageIndex" :page-size="pageSize" :total="totalElements" @current-change="handlePageChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Client",
  data() {
    return {
      //分页查询参数对象
      queryInfo: {
        CilentId: null,
        orderBy: 'userRoleId',
        page: 1,
        pageNum: 5,
        asc: true,
      },
      //搜索查询对象
      sortItem:[
        {
          value: 'userId',
          label: '用户ID',
        }, {
          value: 'userName',
          label: '用户名',
        }, {
          value: 'totalChargeHour',
          label: '充电总时长',
        },{
          value: 'totalOverTimeHour',
          label: '超时总时长',
        },{
          value: 'totalChargeTimes',
          label: '充电次数',
        },{
          value: 'userPhone',
          label: '联系方式',
        },{
          value: 'userNickName',
          label: '用户昵称',
        },{
          value: 'autoSelect',
          label: '选择方式',
        },{
          value: 'autoFix',
          label: '调整方式',
        }
      ],
      //用户列表
      ClientList: [],
      //总页数
      totalPages: 0,
      //总用户数目
      totalElements: 0,
      //当前页
      pageIndex: 1,
      //总页数
      pageSize: 0,
      //详情框显示
      addVisible: false,
    };
  },
  created() {
    this.getClientList();
  },
  methods: {
    async getClientList() {
      const {
        content: Clientlist,
        totalElements: totalElements,
        totalPages: totalPages,
        number: index,
        size: pagesize,
      } = await this.$axios.get(
          `user/admin/${this.queryInfo.orderBy}/${this.queryInfo.page}/${this.queryInfo.pageNum}/${this.queryInfo.asc}`
      );
      this.totalElements = totalElements;
      this.totalPages = totalPages;
      this.ClientList = Clientlist;
      this.pageIndex = index + 1;
      this.pageSize = pagesize;
    },
    async handleSearch(){
      this.ClientList = [];
      await this.$axios
      .get(`user/admin/${this.queryInfo.chargePileId}`)
      .then((res) =>{
        this.ClientList[0] = res;
        if (res === "")
          this.ClientList = [];
        let len = this.ClientList.length;
        this.totalElements = len;
        this.totalPages = len;
        this.pageSize = len;
        this.pageIndex = len;
      });
    },
    handlePageChange(newPage) {
      this.queryInfo.page = newPage;
      this.getClientList();
    },
    SortChange(column){
      console.log(column.prop)
      if (column.prop === null)
        return;
      this.queryInfo.asc = column.order === 'ascending' ? true : false;
      this.queryInfo.orderBy = column.prop;
      this.getClientList();
    },
    adminstyle({row, column}){
      console.log(row.userRoleId)
      if (row.userRoleId == 2 && column.id === 'el-table_1_column_9')
        return 'font-weight:border;color:red;';
      return ;
    },
    userRole(num){
      if (num==2)
        return '管理员';
      else
        return '普通用户';
    }
  }
}
</script>

<style scoped>
  @import "client/outline.css";
</style>